<template>

    <div class="background-container">

        <el-card style="max-width:580px;background-color: white;">
            <template #header>
                <div class="card-header">
                    <span>管理员登录</span>
                </div>
            </template>
            <el-form label-width="80px">
                <el-form-item label="用户名:">
                    <el-input v-model="username" placeholder="Please input" style="width: 240px" />
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="password" type="password" placeholder="Please input" style="width: 240px" />
                </el-form-item>
            </el-form>
            <template #footer><el-button @click="login()" type="primary">登录</el-button></template>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const message = ref('Hello, Vue 3!');
const username = ref(''); // 存储用户名
const password = ref(''); // 存储密码


import router from '@/router';
import axios from 'axios';

onMounted(() => {
    // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});

function login() {
    const data ={
        username: username.value,
        password: password.value,
    }

    axios.post('http://127.0.0.1:8000/user/login/', data)
        .then(res => {
            if (res.data.code == "1001") {
                localStorage.setItem('token',res.data.token)
                router.push("/dashboard/one")
            } else {
                alert(res.data.message)
            }
        })
        .catch(err => {
            console.error(err);
        })
}
</script>

<style scoped>
.background-container {
    background-image: url('@/assets/school.png');
    /* 假设图片在 assets 目录下 */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.card-header span {
    color: black;
    /* 确保文字颜色可见 */
    display: block;
    /* 确保元素是可见的显示类型 */
}

.el-form {
    padding: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}
</style>